<html>
<head>
    <script src="../js/vue.js"></script>
</head>
<body>
    <h3>事件处理</h3>
    <h5>事件处理放在指令内</h5>
    <div  id="app1">
        <button v-on:click="counter += 1">add 1</button>
        <p>this counter's value= {{counter}}</p>
    </div>
    <h5>事件处理放在函数内</h5>
    <div id="app2">
        <button v-on:click="greet">Greet</button>
        <input v-on:keyup.enter="print"/>
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
        <hr/>
        <div>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>
        <hr/>
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
              {{ option.text }}
            </option>
          </select>
          <span>Selected: {{ selected }}</span>
    </div>
    <script src="app6.js"></script>
</body>
</html>